<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>Supr admin</title>
    <meta name="author" content="SuggeElson" />
    <meta name="description" content="Supr admin template - new premium responsive admin template. This template is designed to help you build the site administration without losing valuable time.Template contains all the important functions which must have one backend system.Build on great twitter boostrap framework" />
    <meta name="keywords" content="admin, admin template, admin theme, responsive, responsive admin, responsive admin template, responsive theme, themeforest, 960 grid system, grid, grid theme, liquid, masonry, jquery, administration, administration template, administration theme, mobile, touch , responsive layout, boostrap, twitter boostrap" />
    <meta name="application-name" content="Supr admin template" />

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Le styles -->

    <!-- Use new way for google web fonts 
    http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /> <!-- Headings -->
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> <!-- Text -->
    <!--[if lt IE 9]>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:400" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:700" rel="stylesheet" type="text/css" />
    <![endif]-->

    <link href="css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="css/supr-theme/jquery.ui.supr.css" rel="stylesheet" type="text/css" />
    <link href="css/icons.css" rel="stylesheet" type="text/css" />
    <!-- Plugin stylesheets -->
    <link href="plugins/qtip/jquery.qtip.css" rel="stylesheet" type="text/css" />
    <link href="plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
    <link href="plugins/jpages/jPages.css" rel="stylesheet" type="text/css" />
    <link href="plugins/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <link href="plugins/inputlimiter/jquery.inputlimiter.css" type="text/css" rel="stylesheet" />
    <link href="plugins/ibutton/jquery.ibutton.css" type="text/css" rel="stylesheet" />
    <link href="plugins/uniform/uniform.default.css" type="text/css" rel="stylesheet" />
    <link href="plugins/color-picker/color-picker.css" type="text/css" rel="stylesheet" />
    <link href="plugins/select/select2.css" type="text/css" rel="stylesheet" />
    <link href="plugins/validate/validate.css" type="text/css" rel="stylesheet" />
    <link href="plugins/pnotify/jquery.pnotify.default.css" type="text/css" rel="stylesheet" />
    <link href="plugins/pretty-photo/prettyPhoto.css" type="text/css" rel="stylesheet" />
    <link href="plugins/smartWizzard/smart_wizard.css" type="text/css" rel="stylesheet" />
    <link href="plugins/dataTables/jquery.dataTables.css" type="text/css" rel="stylesheet" />
    <link href="plugins/elfinder/elfinder.css" type="text/css" rel="stylesheet" />
    <link href="plugins/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" rel="stylesheet" />

    <!-- Main stylesheets -->
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <link type="text/css" href="css/ie.css" rel="stylesheet" />
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57-precomposed.png" />

    <script type="text/javascript">
        //adding load class to body and hide page
        document.documentElement.className += 'loadstate';
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
      
    <body>

    <!-- loading animation -->
    <div id="qLoverlay"></div>
    <div id="qLbar"></div>
    
    <div id="header">

        <div class="navbar">
            <div class="navbar-inner">
              <div class="container-fluid">
                <a class="brand" href="dashboard.html">Supr.<span class="slogan">admin</span></a>
                <div class="nav-no-collapse">
                    <ul class="nav">
                        <li><a href="dashboard.html"><span class="icon16 icomoon-icon-screen"></span> Dashboard</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-cog"></span> Settings
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul>
                                        <li>                                                    
                                            <a href="#"><span class="icon16 iconic-icon-new-window"></span>Site config</a>
                                        </li>
                                        <li>                                                    
                                            <a href="#"><span class="icon16 icomoon-icon-wrench"></span>Plugins</a>
                                        </li>
                                        <li>
                                            <a href="#"><span class="icon16 icomoon-icon-picture-2"></span>Themes</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-mail"></span>Messages <span class="notification">8</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul class="messages">    
                                        <li class="header"><strong>Messages</strong> (10) emails and (2) PM</li>
                                        <li>
                                           <span class="icon"><span class="icon16 icomoon-icon-user-2"></span></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>Sammy Morerira</strong></a><span class="time">35 min ago</span></span>
                                            <span class="msg">I have question about new function ...</span>
                                        </li>
                                        <li>
                                           <span class="icon avatar"><img src="images/avatar.jpg" alt="" /></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>George Michael</strong></a><span class="time">1 hour ago</span></span>
                                            <span class="msg">I need to meet you urgent please call me ...</span>
                                        </li>
                                        <li>
                                            <span class="icon"><span class="icon16 icomoon-icon-mail"></span></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>Ivanovich</strong></a><span class="time">1 day ago</span></span>
                                            <span class="msg">I send you my suggestion, please look and ...</span>
                                        </li>
                                        <li class="view-all"><a href="#">View all messages <span class="icon16  icomoon-icon-arrow-right-7"></span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                  
                    <ul class="nav pull-right usernav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-bell"></span><span class="notification">3</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul class="notif">
                                        <li class="header"><strong>Notifications</strong> (3) items</li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-user-2"></span></span>
                                                <span class="event">1 User is registred</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-comments-4"></span></span>
                                                <span class="event">Jony add 1 comment</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-new"></span></span>
                                                <span class="event">admin Julia added post</span>
                                            </a>
                                        </li>
                                        <li class="view-all"><a href="#">View all notifications <span class="icon16  icomoon-icon-arrow-right-7"></span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown">
                                <img src="images/avatar.jpg" alt="" class="image" /> 
                                <span class="txt">admin@supr.com</span>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul>
                                        <li>
                                            <a href="#"><span class="icon16 icomoon-icon-user-3"></span>Edit profile</a>
                                        </li>
                                        <li>
                                            <a href="#"><span class="icon16 icomoon-icon-comments-2"></span>Approve comments</a>
                                        </li>
                                        <li>
                                            <a href="#"><span class="icon16 entypo-icon-contact"></span>Add user</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="index.html"><span class="icon16 icomoon-icon-exit"></span> Logout</a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
              </div>
            </div><!-- /navbar-inner -->
          </div><!-- /navbar --> 

    </div><!-- End #header -->

    <div id="wrapper">

        <!--Responsive navigation button-->  
        <div class="resBtn">
            <a href="#"><span class="icon16 minia-icon-list-3"></span></a>
        </div>

        <!--Sidebar collapse button-->  
        <div class="collapseBtn">
             <a href="#" class="tipR" title="Hide sidebar"><span class="icon12 minia-icon-layout"></span></a>
        </div>

        <!--Sidebar background-->
        <div id="sidebarbg"></div>
        <!--Sidebar content-->
        <div id="sidebar">

            <div class="shortcuts">
                <ul>
                    <li><a href="#" title="Support section" class="tip"><span class="icon24 icomoon-icon-support"></span></a></li>
                    <li><a href="#" title="Database backup" class="tip"><span class="icon24 icomoon-icon-database"></span></a></li>
                    <li><a href="#" title="Sales statistics" class="tip"><span class="icon24 iconic-icon-chart"></span></a></li>
                    <li><a href="#" title="Write post" class="tip"><span class="icon24 icomoon-icon-pencil"></span></a></li>
                </ul>
            </div><!-- End search -->            

            <div class="sidenav">

                <div class="sidebar-widget" style="margin: -1px 0 0 0;">
                    <h5 class="title" style="margin-bottom:0">Navigation</h5>
                </div><!-- End .sidenav-widget -->

                <div class="mainnav">
                    <ul>
                        <li><a href="charts.html"><span class="icon16 icomoon-icon-stats-up"></span>Charts</a></li>
                        <li>
                            <a href="#"><span class="icon16 minia-icon-list-4"></span>Forms</a>
                            <ul class="sub">
                                <li><a href="forms.html"><span class="icon16 icomoon-icon-paper"></span>Forms Stuff</a></li>
                                <li><a href="forms-validation.html"><span class="icon16 icomoon-icon-paper"></span>Validation</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><span class="icon16 silk-icon-columns"></span>Tables</a>
                            <ul class="sub">
                                <li><a href="tables.html"><span class="icon16 icomoon-icon-arrow-right"></span>Static</a></li>
                                <li><a href="data-table.html"><span class="icon16 icomoon-icon-arrow-right"></span>Data table</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><span class="icon16 brocco-icon-grid"></span>UI Elements</a>
                            <ul class="sub">
                                <li><a href="icons.html"><span class="icon16 icomoon-icon-rocket"></span>Icons</a></li>
                                <li><a href="buttons.html"><span class="icon16 icomoon-icon-paper"></span>Buttons</a></li>
                                <li><a href="elements.html"><span class="icon16 minia-icon-cog"></span>Elements</a></li>
                            </ul>
                        </li>
                        <li><a href="typo.html"><span class="icon16 icomoon-icon-font"></span>Typography</a></li>
                        <li><a href="grid.html"><span class="icon16 icomoon-icon-grid-view"></span>Grid</a></li>
                        <li><a href="calendar.html"><span class="icon16 brocco-icon-calendar"></span>Calendar</a></li>
                        <li>
                            <a href="widgets.html"><span class="icon16 icomoon-icon-cube"></span>Widgets<span class="notification green">28</span></a>
                        </li>
                        <li><a href="file.html"><span class="icon16 icomoon-icon-upload-2"></span>File Manager</a></li>
                        <li>
                            <a href="#"><span class="icon16 icomoon-icon-paper"></span>Error pages<span class="notification">6</span></a>
                            <ul class="sub">
                                <li><a href="403.html"><span class="icon16 icomoon-icon-paper"></span>Error 403</a></li>
                                <li><a href="404.html"><span class="icon16 icomoon-icon-paper"></span>Error 404</a></li>
                                <li><a href="405.html"><span class="icon16 icomoon-icon-paper"></span>Error 405</a></li>
                                <li><a href="500.html"><span class="icon16 icomoon-icon-paper"></span>Error 500</a></li>
                                <li><a href="503.html"><span class="icon16 icomoon-icon-paper"></span>Error 503</a></li>
                                <li><a href="offline.html"><span class="icon16 icomoon-icon-paper"></span>Offline page</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><span class="icon16 iconic-icon-box"></span>Other pages<span class="notification blue">2</span></a>
                            <ul class="sub">
                                <li><a href="invoice.html"><span class="icon16 icomoon-icon-paper"></span>Invoice page</a></li>
                                <li><a href="profile.html"><span class="icon16 icomoon-icon-paper"></span>User profile</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div><!-- End sidenav -->

            <div class="sidebar-widget">
                <h5 class="title">Monthly Bandwidth Transfer</h5>
                <div class="content">
                    <span class="icon16 iconic-icon-transfer left"></span>
                    <div class="progress progress-mini progress-danger left tip" title="87%">
                      <div class="bar" style="width: 87%;"></div>
                    </div>
                    <span class="percent">87%</span>
                    <div class="stat">19419.94 / 12000 MB</div>
                </div>

            </div><!-- End .sidenav-widget -->

            <div class="sidebar-widget">
                <h5 class="title">Disk Space Usage</h5>
                <div class="content">
                    <span class="icon16 icomoon-icon-cloud left"></span>
                    <div class="progress progress-mini progress-success left tip" title="16%">
                      <div class="bar" style="width: 16%;"></div>
                    </div>
                    <span class="percent">16%</span>
                    <div class="stat">304.44 / 8000 MB</div>
                </div>

            </div><!-- End .sidenav-widget -->

            <div class="sidebar-widget">
                <h5 class="title">Ad sense stats</h5>
                <div class="content">
                    
                    <div class="stats">
                        <div class="item">
                            <div class="head clearfix">
                                <div class="txt">Advert View</div>
                            </div>
                            <span class="icon16 icomoon-icon-eye left"></span>
                            <div class="number">21,501</div>
                            <div class="change">
                                <span class="icon24 icomoon-icon-arrow-up green"></span>
                                5%
                            </div>
                            <span id="stat1" class="spark"></span>
                        </div>
                        <div class="item">
                            <div class="head clearfix">
                                <div class="txt">Clicks</div>
                            </div>
                            <span class="icon16 entypo-icon-thumbs-up left"></span>
                            <div class="number">308</div>
                            <div class="change">
                                <span class="icon24 icomoon-icon-arrow-down red"></span>
                                8%
                            </div>
                            <span id="stat2" class="spark"></span>
                        </div>
                        <div class="item">
                            <div class="head clearfix">
                                <div class="txt">Page CTR</div>
                            </div>
                            <span class="icon16 icomoon-icon-heart left"></span>
                            <div class="number">4%</div>
                            <div class="change">
                                <span class="icon24 icomoon-icon-arrow-down red"></span>
                                1%
                            </div>
                            <span id="stat3" class="spark"></span>
                        </div>
                        <div class="item">
                            <div class="head clearfix">
                                <div class="txt">Earn money</div>
                            </div>
                            <span class="icon16 icomoon-icon-calculate left"></span>
                            <div class="number">$376</div>
                            <div class="change">
                                <span class="icon24 icomoon-icon-arrow-up green"></span>
                                26%
                            </div>
                            <span id="stat4" class="spark"></span>
                        </div>
                    </div>

                </div>

            </div><!-- End .sidenav-widget -->

            <div class="sidebar-widget">
                <h5 class="title">Right now</h5>
                <div class="content">
                    <div class="rightnow">
                        <ul class="unstyled">
                            <li><span class="number">34</span><span class="icon16 icomoon-icon-new"></span>Posts</li>
                            <li><span class="number">7</span><span class="icon16 icomoon-icon-paper"></span>Pages</li>
                            <li><span class="number">14</span><span class="icon16 brocco-icon-list"></span>Categories</li>
                            <li><span class="number">201</span><span class="icon16 icomoon-icon-tag"></span>Tags</li>
                        </ul>
                    </div>
                </div>

            </div><!-- End .sidenav-widget -->

        </div><!-- End #sidebar -->

        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->

                <div class="heading">

                    <h3>Buttons</h3>                    

                    <div class="resBtnSearch">
                        <a href="#"><span class="icon16 brocco-icon-search"></span></a>
                    </div>

                    <div class="search">

                        <form id="searchform" action="#" />
                            <input type="text" class="top-search" placeholder="Search here ..." />
                            <input type="submit" class="search-btn" value="" />
                        </form>
                
                    </div><!-- End search -->
                    
                    <ul class="breadcrumb">
                        <li>You are here:</li>
                        <li>
                            <a href="#" class="tip" title="back to dashboard">
                                <span class="icon16 icomoon-icon-screen"></span>
                            </a> 
                            <span class="divider">
                                <span class="icon16 icomoon-icon-arrow-right"></span>
                            </span>
                        </li>
                        <li class="active">Buttons</li>
                    </ul>

                </div><!-- End .heading-->
    				
                <!-- Build page from here: Usual with <div class="row-fluid"></div> -->
                    <div class="row-fluid">

                        <div class="span6">
                            <div class="page-header">
                                <h4>Normal buttons</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn</code></p>
                                    <button class="btn">Default</button>
                                    <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-primary</code></p>
                                    <button class="btn btn-primary" href="#">Primary</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-info</code></p>
                                    <button class="btn btn-info" href="#">Info</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-success</code></p>
                                    <button class="btn btn-success" href="#">Success</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-warning</code></p>
                                    <button class="btn btn-warning" href="#">Warning</button>
                                    <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-danger</code></p>
                                    <button class="btn btn-danger" href="#">Danger</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-inverse</code></p>
                                    <button class="btn btn-inverse" href="#">Inverse</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                        <div class="span6">
                            <div class="page-header">
                                <h4>Small buttons</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-mini</code></p>
                                    <button class="btn btn-mini" href="#">Default</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-primary btn-mini</code></p>
                                    <button class="btn btn-primary btn-mini" href="#">Primary</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-info btn-mini</code></p>
                                    <button class="btn btn-info btn-mini" href="#">Info</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-success btn-mini</code></p>
                                    <button class="btn btn-success btn-mini" href="#">Success</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-warning btn-mini</code></p>
                                    <button class="btn btn-warning btn-mini" href="#">Warning</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-danger btn-mini</code></p>
                                    <button class="btn btn-danger btn-mini" href="#">Danger</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-inverse btn-mini</code></p>
                                    <button class="btn btn-inverse btn-mini" href="#">Inverse</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                    </div><!-- End .row-fluid --> 

                    <div class="row-fluid">

                        <div class="span6">
                            <div class="page-header">
                                <h4>Large buttons</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-large</code></p>
                                    <button class="btn btn-large" href="#">Default</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-primary btn-large</code></p>
                                    <button class="btn btn-primary btn-large" href="#">Primary</button>
                                    <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-info btn-large</code></p>
                                    <button class="btn btn-info btn-large" href="#">Info</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-success btn-large</code></p>
                                    <button class="btn btn-success btn-large" href="#">Success</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-warning btn-large</code></p>
                                    <button class="btn btn-warning btn-large" href="#">Warning</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-danger btn-large</code></p>
                                    <button class="btn btn-danger btn-large" href="#">Danger</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-inverse btn-large</code></p>
                                    <button class="btn btn-inverse btn-large" href="#">Inverse</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                        <div class="span6">
                            <div class="page-header">
                                <h4>Disabled buttons</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn</code></p>
                                    <button class="btn" href="#" disabled="disabled">Default</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-primary</code></p>
                                    <button class="btn btn-primary" href="#" disabled="disabled">Primary</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-info</code></p>
                                    <button class="btn btn-info" href="#" disabled="disabled">Info</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-success</code></p>
                                    <button class="btn btn-success" href="#" disabled="disabled">Success</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-warning</code></p>
                                    <button class="btn btn-warning" href="#" disabled="disabled">Warning</button>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-danger</code></p>
                                    <button class="btn btn-danger" href="#" disabled="disabled">Danger</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-inverse</code></p>
                                    <button class="btn btn-inverse" href="#" disabled="disabled">Inverse</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                    </div><!-- End .row-fluid --> 

                    <div class="row-fluid">

                        <div class="span6">
                            <div class="page-header">
                                <h4>With icons</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn</code></p>
                                    <button class="btn" href="#"><span class="icon16 icomoon-icon-cog"></span> Default</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-primary</code></p>
                                    <button class="btn btn-primary" href="#"><span class="icon16 icomoon-icon-basket white"></span> Primary</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-info</code></p>
                                    <button class="btn btn-info" href="#"><span class="icon16 entypo-icon-info-circle white"></span> Info</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-success</code></p>
                                    <button class="btn btn-success" href="#"><span class="icon16 icomoon-icon-checkmark white"></span> Success</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-warning</code></p>
                                    <button class="btn btn-warning" href="#"><span class="icon16 entypo-icon-warning white"></span> Warning</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p><code>btn btn-danger</code></p>
                                    <button class="btn btn-danger" href="#"><span class="icon16 icomoon-icon-cancel-2 white"></span> Danger</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p><code>btn btn-inverse</code></p>
                                    <button class="btn btn-inverse" href="#"><span class="icon16 icomoon-icon-loop white"></span> Inverse</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                        <div class="span6">
                            <div class="page-header">
                                <h4>Other styles</h4>
                            </div>
                            <div class="row-fluid">

                                <div class="span4">
                                    <p>button groups</p>
                                    <div class="btn-group">
                                      <a class="btn" href="#"><span class="icon-align-left"></span></a>
                                      <a class="btn" href="#"><span class="icon-align-center"></span></a>
                                      <a class="btn" href="#"><span class="icon-align-right"></span></a>
                                      <a class="btn" href="#"><span class="icon-align-justify"></span></a>
                                    </div>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p>Drop down button</p>
                                    <div class="btn-group">
                                      <a class="btn btn-primary" href="#"><span class="icon-user icon-white"></span> User</a>
                                      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                                      <ul class="dropdown-menu">
                                        <li><a href="#"><span class="icon-pencil"></span> Edit</a></li>
                                        <li><a href="#"><span class="icon-trash"></span> Delete</a></li>
                                        <li><a href="#"><span class="icon-ban-circle"></span> Ban</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#"><span class="i"></span> Make admin</a></li>
                                      </ul>
                                    </div>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p>Drop up button</p>
                                    <div class="btn-group dropup">
                                        <button class="btn">Dropup</button>
                                        <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->  

                            <div class="row-fluid">

                                <div class="span4">
                                    <p>Loading state button</p>
                                    <button id="fat-btn" data-loading-text="loading..." class="btn">Loading State</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p>Single toggle</p>
                                    <button class="btn btn-info" data-toggle="button">Single Toggle</button>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                                <div class="span4">
                                    <p>Checkbox buttons</p>
                                    <div class="btn-group" data-toggle="buttons-checkbox">
                                        <button class="btn btn-primary active">Left</button>
                                        <button class="btn btn-primary active">Middle</button>
                                        <button class="btn btn-primary active">Right</button>
                                    </div>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->

                            <div class="row-fluid">

                                <div class="span4">
                                    <p>Radio buttons</p>
                                    <div class="btn-group" data-toggle="buttons-radio">
                                        <button class="btn btn-primary">Left</button>
                                        <button class="btn btn-primary">Middle</button>
                                        <button class="btn btn-primary active">Right</button>
                                    </div>
                                     <div class="marginB10"></div>
                                </div><!-- End .span4 -->

                            </div><!-- End .row-fluid -->                             

                        </div><!-- End .span6 -->

                    </div><!-- End .row-fluid -->  
               
    			<!-- Page end here -->
    				
                <div class="modal fade hide" id="myModal1">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span class="icon12 minia-icon-close"></span></button>
                        <h3>Chat layout</h3>
                    </div>
                    <div class="modal-body">
                        <ul class="messages">
                            <li class="user clearfix">
                                <a href="#" class="avatar">
                                    <img src="images/avatar2.jpeg" alt="" />
                                </a>
                                <div class="message">
                                    <div class="head clearfix">
                                        <span class="name"><strong>Lazar</strong> says:</span>
                                        <span class="time">25 seconds ago</span>
                                    </div>
                                    <p>
                                        Time to go i call you tomorrow.
                                    </p>
                                </div>
                            </li>
                            <li class="admin clearfix">
                                <a href="#" class="avatar">
                                    <img src="images/avatar3.jpeg" alt="" />
                                </a>
                                <div class="message">
                                    <div class="head clearfix">
                                        <span class="name"><strong>Sugge</strong> says:</span>
                                        <span class="time">just now</span>
                                    </div>
                                    <p>
                                        OK, have a nice day.
                                    </p>
                                </div>
                            </li>

                            <li class="sendMsg">
                                <form class="form-horizontal" action="#" />
                                    <textarea class="elastic" id="textarea" rows="1" placeholder="Enter your message ..." style="width:98%;"></textarea>
                                    <button type="submit" class="btn btn-info marginT10">Send message</button>
                                </form>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn" data-dismiss="modal">Close</a>
                    </div>
                </div>
                
            </div><!-- End contentwrapper -->
        </div><!-- End #content -->
    
    </div><!-- End #wrapper -->

    <!-- Le javascript
    ================================================== -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>  
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

    <!-- Load plugins -->
    <script type="text/javascript" src="plugins/qtip/jquery.qtip.min.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.grow.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.resize.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.tooltip_0.4.4.js"></script>
    <script type="text/javascript" src="plugins/flot/jquery.flot.orderBars.js"></script>

    <script type="text/javascript" src="plugins/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="plugins/knob/jquery.knob.js"></script>
    <script type="text/javascript" src="plugins/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="plugins/prettify/prettify.js"></script>

    <script type="text/javascript" src="plugins/watermark/jquery.watermark.min.js"></script>
    <script type="text/javascript" src="plugins/elastic/jquery.elastic.js"></script>
    <script type="text/javascript" src="plugins/inputlimiter/jquery.inputlimiter.1.3.min.js"></script>
    <script type="text/javascript" src="plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>
    <script type="text/javascript" src="plugins/ibutton/jquery.ibutton.min.js"></script>
    <script type="text/javascript" src="plugins/uniform/jquery.uniform.min.js"></script>
    <script type="text/javascript" src="plugins/stepper/ui.stepper.js"></script>
    <script type="text/javascript" src="plugins/color-picker/colorpicker.js"></script>
    <script type="text/javascript" src="plugins/timeentry/jquery.timeentry.min.js"></script>
    <script type="text/javascript" src="plugins/select/select2.min.js"></script>
    <script type="text/javascript" src="plugins/dualselect/jquery.dualListBox-1.3.min.js"></script>
    <script type="text/javascript" src="plugins/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" src="plugins/validate/jquery.validate.min.js"></script>

    <script type="text/javascript" src="plugins/animated-progress-bar/jquery.progressbar.js"></script>
    <script type="text/javascript" src="plugins/pnotify/jquery.pnotify.min.js"></script>
    <script type="text/javascript" src="plugins/lazy-load/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="plugins/jpages/jPages.min.js"></script>
    <script type="text/javascript" src="plugins/pretty-photo/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="plugins/smartWizzard/jquery.smartWizard-2.0.min.js"></script>

    <script type="text/javascript" src="plugins/touch-punch/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="plugins/ios-fix/ios-orientationchange-fix.js"></script>

    <script type="text/javascript" src="plugins/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="plugins/elfinder/elfinder.min.js"></script>
    <script type="text/javascript" src="plugins/plupload/plupload.js"></script>
    <script type="text/javascript" src="plugins/plupload/plupload.html4.js"></script>
    <script type="text/javascript" src="plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>


    <!-- Init plugins -->
    <script type="text/javascript" src="js/statistic.js"></script><!-- Control graphs ( chart, pies and etc) -->

    <script type="text/javascript" src="js/main.js"></script>
   

    </body>
</html>
